<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div#adv{
				overflow: hidden;
				border:2px outset green;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					if(this.value=="hide"){
						$("#adv").fadeOut(4000);
						//this.value="show";
						$(this).val("show");
					}else{
						$("#adv").fadeIn(4000);
						//this.value="show";
						$(this).val("hide");
					} 
				});
				$("#btn2").click(function(){
					if(this.value=="hide"){
						$("#adv").slideUp(4000);
						//this.value="show";
						$(this).val("show");
					}else{
						$("#adv").slideDown(4000);
						//this.value="show";
						$(this).val("hide");
					} 
				});
				$("#btn3").click(function(){
					$("#adv").animate({
						"width":"0",
						"height":"20px"
					},2000,"swing");
				});
				$("#btn4").click(function(){
					$("#adv").remove();
					//$("#adv").empty();
				});
			});
		</script>
	</head>
	<body>
		<div id="adv">
			<img src="../images/game01.jpg"/>
		</div>
		<input type="button" value="hide" id="btn1"/>
		<input type="button" value="hide" id="btn2"/>
		
		<input type="button" value="hide" id="btn3"/>
		
<input type="button" value="删除" id="btn4"/>
	</body>
</html>
